<!DOCTYPE html>
<html>
	<head>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{margin:0;padding:0;}
			html,body{background:url(img/xk.jpg) no-repeat center center /cover;position:absolute;height:100%;width:100%;top:0;bottom:0;right:0;left:0;}
			.main{position:absolute;left:0;top:0;bottom:0;right:0;width:100%;height:100%;z-index:1;
			-webkit-perspective:1000px;-webkit-transform-style:preserve-3d;-webkit-perspective-origin:center center;}
			.main div{border-radius:50%;}
			.div1{width:100px;height:100px;background:#ccc;-webkit-transform:translateZ(-100px);}
			.div2{width:50px;height:50px;background:#08c;-webkit-transform:translateZ(-200px);position:absolute;right:50px;top:50px;}
			.div3{width:150px;height:150px;background:#90f;-webkit-transform:translateZ(-200px);position:absolute;left:10px;bottom:5px;}
			.div4{width:120px;height:120px;background:#ff0;-webkit-transform:translateZ(-500px);position:absolute;right:5px;bottom:20px;}
			.div5{width:130px;height:130px;background:#90c;-webkit-transform:translateZ(-900px);position:absolute;right:30px;bottom:200px;}
			.div6{width:110px;height:110px;background:#fff;-webkit-transform:translateZ(-1200px);position:absolute;left:50px;top:150px;}
		
		</style>
	</head>
	<body>
		<div class="main">
			<div class="div1"></div>
			<div class="div2"></div>
			<div class="div3"></div>
			<div class="div4"></div>
			<div class="div5"></div>
			<div class="div6"></div>
		</div>
	</body>
</html>
<script type="text/javascript">
	$(function(){
		var b = 0;
		var c = 5;
		var ot = setInterval(function(){
			c *= 1;
			b += c;
			if(b>=6000){
				c *= 2;
			}
			if(b>=20000){
				b = 0;
				clearInterval(ot);
			}
			$(".main").css("-webkit-perspective",b+"px")
		},50)
	})
	
</script>